<template>
  <div class="contanier">
    <div class="box_2 flex-col justify-end">
      <div class="group_3 flex-row">
        <img
          class="image_1"
          referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/SketchPng04b4eec64c503b4c60aefb0bfc9400a5fdeaafc6ae338f4c3682c067ba99df75"
        />
        <div class="box_14 flex-col justify-between">
          <!-- {{ userInfo }} -->
          <div class="group_11 flex-row justify-between">
            <span class="text_15">{{userInfo.userName}}丨{{userInfo.roleName}}</span> <!-- 角色: -->
            <div class="group_5 flex-row">
              <img
                class="thumbnail_6"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng4cf250bfa16d61d6c933d37c5a127d79a572a1babb46435c8dc2a41b8bf93b75"
              />
              <span class="text_16">{{userInfo.zhiye}}</span> <!-- 职业名称: -->
            </div>
          </div>
          <div class="text-wrapper_39 flex-row">
            <!-- <span class="text_17">在线时长</span>
            <span class="text_18">{{ lastLoginTime }}</span>
            <span class="text_19">登录总次数</span>
            <span class="text_20">{{ loginSuccessCount }}</span> -->
            <span class="" style="font-size: 15px;">积分</span>
            <span class="text_22">{{ allPoints }}</span>
            <span class="text_23">已获得证书数量</span>
            <span class="text_24">{{ allCertNum }}</span>
          </div>
        </div>
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/SketchPngb948a454e8dfbd99cf3ffd864fe16264abab7a70b514ebcc8f532a8e6cc6666e"
        />
      </div>
      <div class="group_6 flex-col">
        <span class="text_25">最近更新视频</span>
        <infoBox class="infoBox" style="margin-top: -20px" title="">
          <template v-slot:body>
            <div class="itemall">
              <el-row :gutter="15" style="width: 100%">
                <el-col v-for="(item, index) in courseList" :span="6" :key="index">
                  <div class="item"  style="width: 380px; height: 308px;">
                    <!-- <div class="tag">已完成</div> -->
                    <!-- <div class="tag" v-if="item.enabledMark">{{ item.enabledMark | dynamicText(enabledMarkOptions) }}</div> -->
                    <el-image
                      class="logoImg"
                      :src="define.APIURl + item.cover"
                    />
                    <!-- :src="'/dev' + item.cover" -->
                    <div class="content2">
                      {{ item.name }}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
        </infoBox>
      </div>
      <div class="group_8 flex-col">
        <span class="text_27">最近更新考试</span>
        <infoBox class="infoBox" style="margin-top: -20px" title="">
          <template v-slot:body>
            <el-table
              ref="multipleTable"
              :data="tableData"
              :header-cell-style="{
                backgroundColor: '#f5f7fa',
                color: '#606266',
              }"
              :row-class-name="tableRowClassName"
              class="table-top"
              tooltip-effect="dark"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="300"
              />
              <el-table-column label="开始时间" width="300" align="center" prop="startDatetime">
              </el-table-column>
              <el-table-column label="考试名称" width="300" align="center" prop="fullName"></el-table-column>
              <el-table-column label="" width="300" align="center" prop=""></el-table-column>
              <el-table-column label="" width="" align="center" prop=""></el-table-column>
            </el-table>
          </template>
        </infoBox>
        <!-- <el-row style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
          <el-col :span="23">
          </el-col>
        </el-row>
      </div> -->
      </div>
    </div>
  </div>
</template>
<script>
// import { mapState } from "vuex";
import infoBox from "@/components/infobox3/index";
import { getUserInfo,  temsChbDetail, getMyCertList } from "@/api/home";
import { getTemsCertUserSimpleList } from "@/api/exam/index";
import { getList } from "@/api/dataCenter/dataCenterApi";
import { myExamList } from "@/api/exam";
export default {
  components: {
    infoBox,
  },
  data() {
    return {
      courseList: [],
      lastLoginTime: '',
      loginSuccessCount: '',
      list: [{}, {}, {}, {}, {}, {}],
      tableData: [],
      enabledMarkOptions: [
        { fullName: "待发布", id: "10" },
        { fullName: "已发布", id: "20" },
      ],
      allPoints: 0,
      allCertNum: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      userInfo: {
        userName: '',
        roleName: '',
        zhiye: ''
      }
    };
  },
  computed: {
    // // ...mapState(['userInfo'])
    curUserInfo() {
      return this.$store.state.user.userInfo || {};
    }
  },
  created() {
    this.getUserInfoFun()
    this.getCourseList();
    this.getExamList();
    this.getTemsChbDetail();
    this.getMyCertListData();
  },
  mounted() {
  },
  methods: {
    // 获取总积分
    getTemsChbDetail() {
      temsChbDetail(3).then(res => {
        this.allPoints = res.data.totals;
      })
      .catch(err => {
      })
    },
    // 已获得证书数量
    getMyCertListData() {
      const params = {
        currentPage: 1,
        pageSize: 10,
        sort: 'desc',
        enabledMark: 1,
        sidx: ''
      };
      getTemsCertUserSimpleList(params).then(res => {
        this.allCertNum = res.data.pagination.total;
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    getUserInfoFun() {
      let id = this.curUserInfo.userId;
      getUserInfo(id).then(res => {
        this.userInfo = res.data;
        this.userInfo.userName = this.curUserInfo.userName;
        this.userInfo.roleName = this.curUserInfo.roleName;
      })
      .catch(err => {
      })
    },
    getCourseList() {
      getList({
        currentPage: 1,
        pageSize: 4
      }).then(res => {
        this.courseList = res.data.list;
      })
    },
    getExamList() {
      myExamList({
        // enabledMark:0,
        enabledMark: '',
        currentPage: 1,
        pageSize: 8,
        categoryId: 4
      }).then((res) => {
        if(res.code === 200){
          this.tableData = res.data.list;
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.itemall {
  width: 100%;
  display: flex;
  flex-direction: row;

  .item {
    width: 100%;

    display: flex;
    position: relative;

    align-items: center;
    flex-direction: column;

    .tag {
      width: 52px;
      height: 24px;
      position: absolute;

      background: #323232;
      border-radius: 6px;
      display: flex;
      margin-top: 12px;
      right: 12px;
      justify-content: center;
      align-items: center;

      font-size: 12px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
      color: #ffffff;
      line-height: 22px;
      text-align: right;
      font-style: normal;
      z-index: 1000;
    }

    .logoImg {
      // width: 100%;
      // height: auto;
      width: 380px; 
      height: 308px;
      border-radius: 10px;
    }

    .content2 {
      width: 100%;
      height: 66px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;

      font-size: 16px;
      color: #323232;
      line-height: 33px;
      font-style: normal;
    }
  }
}

::v-deep .el-table .warning-row {
  background: #fff;
}

::v-deep .el-table .success-row {
  background: #f6f8fc;
}

.page {
  position: relative;
  width: 100%;
  height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box_2 {
  position: absolute;

  top: 0;
  width: 100%;

  height: 838px;
}

.group_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;

  height: 130px;
  margin: 24px 24px 0 24px;
  display: flex;
  flex-direction: row;
}

.image_1 {
  width: 90px;
  height: 90px;
  margin: 20px 0 0 40px;
}

.box_14 {
  width: 600px;
  height: 62px;
  margin: 38px 0 0 19px;
}

.group_11 {
  width: 238px;
  height: 24px;
  display: flex;
}

.text_15 {
  // width: 165px;
  height: 28px;
  overflow-wrap: break-word;
  color: rgba(50, 50, 50, 1);
  font-size: 28px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 2px;
}

.group_5 {
  background-color: rgba(34, 101, 238, 1);
  border-radius: 12px;
  // width: 135px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  margin-left: 28px;
  padding: 8px 0 8px 0;

  .thumbnail_6 {
    width: 16px;
    height: 16px;
    margin-left: 19px;
  }

  .text_16 {
    // width: 66px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 12px;
    margin-right: 22px;
  }
}

.text-wrapper_39 {
  width: 600px;
  height: 24px;
  margin-top: 14px;
}

.text_17 {
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 3px;
}

.text_18 {
  width: 29px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 4px;
}

.text_19 {
  width: 70px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  margin: 3px 0 0 20px;
}

.text_20 {
  width: 33px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 4px;
}

.text_21 {
  width: 104px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  margin: 3px 0 0 20px;
}

.text_22 {
  width: 29px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 76px 0 0 4px;
}

.text_23 {
  width: 112px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(83, 99, 135, 1);
  font-size: 15px;
  font-family: PingFang-SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 20px;
  margin: 79px 0 0 20px;
}

.text_24 {
  width: 29px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(34, 101, 238, 1);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 76px 0 0 4px;
}

.image_2 {
  width: 206px;
  height: 130px;
  position: absolute;
  right: 60px;
}

.group_6 {
  padding: 20px 0 0 0;
  background-color: #fff;

  background-size: 100% 100%;

  position: relative;
  margin: 24px 24px 0 24px;
}

.text_25 {
  overflow-wrap: break-word;
  color: rgba(50, 50, 50, 1);
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #323232;
  line-height: 33px;

  font-style: normal;
  margin: 33px 0 0 33px;
}

.group_7 {
  background-color: #e2e7f5;

  height: 1px;
  z-index: 9999;
  margin: 12px 24px 0 24px;
}

.list_4 {
  overflow-x: auto;

  margin: 20px 0 24px 24px;
  display: flex;
  gap: 17px;
  flex-direction: row;
}

.image-text_7-0 {
  width: 355px;
  height: 201px;
  width: 355px;

  /* 如果单词太长，这个属性允许单词在行末断开 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #323232;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
  overflow: hidden;
  /* 隐藏溢出的内容 */
  white-space: nowrap;
  /* 防止文本换行 */
  text-overflow: ellipsis;
}

.box_3-0 {
  height: 145px;
  background-size: 100% 100%;
  width: 258px;
  position: relative;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f5998cf329dd4c75911a1dcb2fe621c0_mergeImage.png) 100% no-repeat;

  .title {
    position: absolute;
    left: 165px;
    top: 22px;
    width: 72px;
    height: 33px;
    background: #323232;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #ffffff;
    line-height: 22px;
    text-align: right;
    font-style: normal;
  }
}

.text_26-0 {
  width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 16px;
}

.text-group_1-0 {
  width: 355px;

  /* 如果单词太长，这个属性允许单词在行末断开 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #323232;
  line-height: 33px;
  text-align: left;
  font-style: normal;

  /* 显示省略号来代表被裁剪的文本 */
}

.image-text_7-1 {
  width: 258px;
  height: 201px;
  margin-right: 17px;
}

.box_3-1 {
  height: 145px;
  background-size: 100% 100%;
  width: 258px;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7d6b5f2801b2416d8cc89812be71f70a_mergeImage.png) 100% no-repeat;
}

.text-wrapper_13-1 {
  background-color: rgba(50, 50, 50, 1);
  border-radius: 4px;
  height: 24px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  margin: 17px 0 0 194px;
}

.text_26-1 {
  width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 16px;
}

.text-group_1-1 {
  width: 258px;
  height: 48px;
  overflow-wrap: break-word;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #323232;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.image-text_7-2 {
  width: 258px;
  height: 201px;
  margin-right: 17px;
}

.box_3-2 {
  height: 145px;
  background-size: 100% 100%;
  width: 258px;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a8052e83a8054b319ad1b30a0759634c_mergeImage.png) 100% no-repeat;
}

.text-wrapper_13-2 {
  background-color: rgba(50, 50, 50, 1);
  border-radius: 4px;
  height: 24px;
  width: 52px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;

  margin: 17px 0 0 194px;
}

.text_26-2 {
  width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 16px;
}

.text-group_1-2 {
  width: 258px;
  height: 48px;
  overflow-wrap: break-word;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #323232;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.image-text_7-3 {
  width: 258px;
  height: 201px;
  margin-right: 17px;
}

.box_3-3 {
  height: 145px;
  background-size: 100% 100%;
  width: 258px;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/6f27c1baf8ce447ebf4f1bc2cd37beb0_mergeImage.png) 100% no-repeat;
}

.text-wrapper_13-3 {
  background-color: rgba(50, 50, 50, 1);
  border-radius: 4px;
  height: 24px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  margin: 17px 0 0 194px;
}

.text_26-3 {
  width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 16px;
}

.text-group_1-3 {
  width: 258px;
  height: 48px;
  overflow-wrap: break-word;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #323232;
  line-height: 33px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.group_8 {
  padding-top: 20px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  position: relative;

  padding-bottom: 20px;
  justify-content: center;
  margin: 24px 24px 0 24px;
}

.text_27 {
  width: 132px;
  height: 30px;
  overflow-wrap: break-word;
  color: rgba(50, 50, 51, 1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  // font-size: 22px;
  font-size: 16px;
  color: #323233;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  margin: 24px 0 0 24px;
}

.image_10 {
  position: absolute;
  left: 259px;
  top: 0;
  width: 1px;
  height: 900px;
}

table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;
  background-color: #e2ebfe;
  border: 0px;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 0px;
}

thead {
  background-color: #d1d1d1;
}

th {
  font-size: 12pt;
  color: #323232;
}

td {
  font-size: 12pt;
  color: #323232;
}

tbody tr:nth-child(even) {
  background-color: #e3edfe;
}

tbody tr:hover {
  background-color: #e0e0e0;
}

td:first-child {
  font-weight: bold;
}
</style>
